<template>
  <div class="register-wrapper">
    <div class="register-left">
      <h1>化学数据研究注册系统</h1>
      <p>加入化学数据研究系统，开启科研新体验</p>
    </div>

    <div class="register-right">
      <div class="register-box">
        <h2>注册新账号</h2>
        <input v-model="username" placeholder="用户名" />
        <input v-model="password" type="password" placeholder="密码" />
        <button @click="register">注册</button>
        <p v-if="msg" class="msg">{{ msg }}</p>
        <p class="login-link">
          已有账号？
          <span @click="goLogin">返回登录</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const username = ref('')
const password = ref('')
const email = ref('')
const msg = ref('')

const register = async () => {
  try {
    const res = await axios.post('http://10.0.6.212:5000/register', {
      username: username.value,
      password: password.value,
      email: email.value
    })
    if (res.data.status === 'success') {
      msg.value = '注册成功！正在跳转登录...'
      setTimeout(() => {
        router.push('/login')
      }, 1500)
    } else {
      msg.value = res.data.msg
    }
  } catch (err) {
    msg.value = '网络错误或服务器异常'
  }
}

const goLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
/* 可以直接复用 login 样式 */
.register-wrapper {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.register-left {
  flex: 1;
  background: linear-gradient(135deg, #a777e3, #6e8efb);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 50px;
}

.register-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4f5f7;
}

.register-box {
  width: 360px;
  padding: 40px 30px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
  text-align: center;
}
.register-box h2 { margin-bottom: 30px; color: #333; }
input {
  width: 100%;
  margin-bottom: 20px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 15px;
}
button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(45deg, #a777e3, #6e8efb);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.login-link {
  margin-top: 15px;
  color: #666;
}
.login-link span {
  color: #6e8efb;
  cursor: pointer;
  font-weight: bold;
}
</style>
